/*
 * @Description: 流程列表列定义
 * @Author: seadon
 * @LastEditors: seadon
 * @Date: 2021-07-08 16:45:52
 * @LastEditTime: 2022-01-17 10:40:44
 */
import moment from 'moment'
import { i18n } from '@/locales'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import ApprovedPerson from '@/entry_desktop/views/ProcessCenter/ApprovedPerson.vue'
import { applyStatus } from './task'
import dai_zh from '@/assets/images/dai_zh.svg'
import dai_en from '@/assets/images/dai_en.svg'
import dai_ja from '@/assets/images/dai_ja.svg'
const locale = localStorage.getItem('locale')?.slice(0, 2) || 'zh'
const tenantDetail = JSON.parse(localStorage.getItem('tenantDetail') || '')
let version = '1'
if (tenantDetail.data.channel_json) {
	const processListVersion =
		JSON.parse(tenantDetail.data.channel_json).process_list_version || '1'
	version = processListVersion
	// version = '1'
}

const { $t } = i18n
interface IurlObj {
	[propName: string]: string
}
const daiUrl: IurlObj = {
	zh: dai_zh,
	en: dai_en,
	ja: dai_ja,
}
const datImg = daiUrl[locale]
// 我的待办
let todoColumnData: any = []
if (version === '2') {
	todoColumnData = Object.freeze([
		{
			dataIndex: 'index',
			width: tenantDetail.data.tenant_auth?.batch_approve ? 64 : 0,
			align: 'center',
			slots: {
				title: 'custom-title',
				customRender: 'custom-index',
			},
		},
		{
			title: $t('informationPortal.SerialNumber', '序号'),
			dataIndex: 'SerialNumber',
			width: 64,
			align: 'center',
			slots: {
				customRender: 'custom-serial-number',
			},
		},
		{
			title: $t('pages.process.column.name', '流程名称'),
			dataIndex: 'subject',
			width: 316,
			customRender: ({ text, record }: { text: string; record: any }) => (
				<div>
					<div class="primary-text">
						{/* {text} */}
						<EllipsisTooltip title={text} />
					</div>
					<div class="descr-text">
						<EllipsisTooltip title={record.process_type} />
					</div>
				</div>
			),
		},
		{
			title: $t('pages.process.column.applyer', '申请人'),
			dataIndex: 'initiator',
			width: 180,
			slots: {
				customRender: 'custom-person',
			},
		},
		{
			title: $t('pages.process.column.currentNode', '当前节点'),
			dataIndex: 'node_name',
			width: 200,
			sorter: true,
			// sortDirections: ['ascend', 'descend'],
			// defaultSortOrder: 'descend',
			customRender: ({ text, record }: { text: string; record: any }) => (
				<div>
					{text && record.create_time ? (
						<div>
							<div class="primary-text">
								<EllipsisTooltip title={text} />
							</div>
							<div class="descr-text">
								{moment(record.create_time)?.format('YYYY-MM-DD HH:mm:ss')}
							</div>
						</div>
					) : (
						'--'
					)}
				</div>
			),
		},
		{
			title: $t('pages.process.column.applied', '申请时间'),
			dataIndex: 'submit_date',
			width: 160,
			// sorter: true,
			customRender: ({ text }: { text: number }) => (
				<div>
					<div class="primary-text">
						{text && moment(text)?.format('YYYY-MM-DD')}
					</div>
					<div class="descr-text">
						{text && moment(text)?.format('HH:mm:ss')}
					</div>
				</div>
			),
		},
	])
} else {
	todoColumnData = Object.freeze([
		{
			dataIndex: 'index',
			width: 64,
			align: 'center',
			slots: {
				title: 'custom-title',
				customRender: 'custom-index',
			},
		},
		{
			title: $t('pages.process.column.name', '流程名称'),
			dataIndex: 'subject',
			width: 316,
			customRender: ({ text, record }: { text: string; record: any }) => (
				<div>
					<div class="primary-text">
						{/* {text} */}
						<EllipsisTooltip title={text} />
					</div>
					<div class="descr-text">
						<EllipsisTooltip title={record.process_type} />
					</div>
				</div>
			),
		},
		{
			title: $t('pages.process.column.applyer', '申请人'),
			dataIndex: 'initiator',
			width: 180,
			slots: {
				customRender: 'custom-person',
			},
		},
		{
			title: $t('pages.process.column.currentNode', '当前节点'),
			dataIndex: 'node_name',
			width: 200,
			sorter: true,
			// sortDirections: ['ascend', 'descend'],
			// defaultSortOrder: 'descend',
			customRender: ({ text, record }: { text: string; record: any }) => (
				<div>
					{text && record.create_time ? (
						<div>
							<div class="primary-text">
								<EllipsisTooltip title={text} />
							</div>
							<div class="descr-text">
								{moment(record.create_time)?.format('YYYY-MM-DD HH:mm:ss')}
							</div>
						</div>
					) : (
						'--'
					)}
				</div>
			),
		},
		{
			title: $t('pages.process.column.applied', '申请时间'),
			dataIndex: 'submit_date',
			width: 160,
			// sorter: true,
			customRender: ({ text }: { text: number }) => (
				<div>
					<div class="primary-text">
						{text && moment(text)?.format('YYYY-MM-DD')}
					</div>
					<div class="descr-text">
						{text && moment(text)?.format('HH:mm:ss')}
					</div>
				</div>
			),
		},
	])
}
export const myTodoColumn = todoColumnData

// 代理代办

let agentTodoColumnData: any = Object.freeze([
	{
		dataIndex: 'index',
		width: 64,
		align: 'center',
		slots: {
			title: 'custom-title',
			customRender: 'custom-index',
		},
	},
	{
		title: $t('pages.process.column.name', '流程名称'),
		dataIndex: 'subject',
		width: 316,
		customCell: () => {
			return {
				style: {
					'min-width': '316px',
				},
			}
		},
		customRender: ({ text, record }: { text: string; record: any }) => (
			<div>
				<div class="primary-text">
					{/* {text} */}
					<EllipsisTooltip title={text} />
				</div>
				<div class="descr-text">
					<EllipsisTooltip title={record.process_type} />
				</div>
			</div>
		),
	},
	{
		title: $t('pages.process.column.submitter', '申请人'),
		dataIndex: 'initiator',
		width: 180,
		slots: {
			customRender: 'custom-person',
		},
	},
	{
		title: $t('pages.process.column.currentNode', '当前节点'),
		dataIndex: 'node_name',
		// sortDirections: ['ascend', 'descend'],
		// defaultSortOrder: 'descend',
		width: 200,
		sorter: true,
		customRender: ({ text, record }: { text: string; record: any }) => (
			<div>
				<div class="primary-text">
					<EllipsisTooltip title={text} />
				</div>
				<div class="descr-text">
					{record.create_time
						? moment(record.create_time)?.format('YYYY-MM-DD HH:mm:ss')
						: ''}
				</div>
			</div>
		),
	},
	{
		title: $t('pages.process.column.applied', '申请时间'),
		dataIndex: 'department',
		// sortDirections: ['ascend', 'descend'],
		// defaultSortOrder: 'descend',
		width: 160,
		sorter: true,
		customRender: ({ record }: { record: any }) => (
			<div>
				<div class="primary-text">
					{record.submit_date &&
						moment(record.submit_date)?.format('YYYY-MM-DD')}
				</div>
				<div class="descr-text">
					{record.submit_date && moment(record.submit_date)?.format('HH:mm:ss')}
				</div>
			</div>
		),
	},
])
if (version === '2') {
	agentTodoColumnData = Object.freeze([
		{
			dataIndex: 'index',
			width: tenantDetail.data.tenant_auth?.batch_approve ? 64 : 0,
			align: 'center',
			slots: {
				title: 'custom-title',
				customRender: 'custom-index',
			},
		},
		{
			title: $t('informationPortal.SerialNumber', '序号'),
			dataIndex: 'SerialNumber',
			width: 64,
			align: 'center',
			slots: {
				customRender: 'custom-serial-number',
			},
		},
		{
			title: $t('pages.process.column.name', '流程名称'),
			dataIndex: 'subject',
			width: 316,
			customRender: ({ text, record }: { text: string; record: any }) => (
				<div>
					<div class="primary-text">
						{/* {text} */}
						<EllipsisTooltip title={text} />
					</div>
					<div class="descr-text">
						<EllipsisTooltip title={record.process_type} />
					</div>
				</div>
			),
		},
		{
			title: $t('pages.process.column.submitter', '申请人'),
			dataIndex: 'initiator',
			width: 180,
			slots: {
				customRender: 'custom-person',
			},
		},
		{
			title: $t('pages.process.column.currentNode', '当前节点'),
			dataIndex: 'node_name',
			// sortDirections: ['ascend', 'descend'],
			// defaultSortOrder: 'descend',
			width: 200,
			sorter: true,
			customRender: ({ text, record }: { text: string; record: any }) => (
				<div>
					<div class="primary-text">
						<EllipsisTooltip title={text} />
					</div>
					<div class="descr-text">
						{record.create_time
							? moment(record.create_time)?.format('YYYY-MM-DD HH:mm:ss')
							: ''}
					</div>
				</div>
			),
		},
		{
			title: $t('pages.process.column.applied', '申请时间'),
			dataIndex: 'submit_date',
			// sortDirections: ['ascend', 'descend'],
			// defaultSortOrder: 'descend',
			width: 160,
			sorter: true,
			customRender: ({ record }: { record: any }) => (
				<div>
					<div class="primary-text">
						{record.submit_date &&
							moment(record.submit_date)?.format('YYYY-MM-DD')}
					</div>
					<div class="descr-text">
						{record.submit_date &&
							moment(record.submit_date)?.format('HH:mm:ss')}
					</div>
				</div>
			),
		},
	])
}
export const agentTodoColumn = agentTodoColumnData

// 我的申请
export const approvalApplicationColumn = Object.freeze([
	{
		title: $t('informationPortal.SerialNumber', '序号'),
		dataIndex: 'index',
		align: 'center',
		width: 64,
		slots: {
			customRender: 'custom-index',
		},
	},
	{
		title: $t('pages.process.column.name', '流程名称'),
		dataIndex: 'subject',
		width: 296,
		customRender: ({ text, record }: { text: string; record: any }) => (
			<div>
				<div class="primary-text">{text}</div>
				<div class="descr-text">
					<EllipsisTooltip title={record.process_type} />
				</div>
			</div>
		),
	},
	{
		title: $t('pages.process.column.approver', '审批人'),
		dataIndex: 'task_assignee_list',
		width: 160,
		slots: {
			customRender: 'custom-person-group',
		},
	},
	{
		title: $t('pages.process.column.currentNode', '当前节点'),
		dataIndex: 'node_name',
		width: 160,
		customRender: ({ text, record }: { text: string; record: any }) => (
			<div>
				{text && record.update_time ? (
					<div>
						<div class="primary-text">
							<EllipsisTooltip title={text} />
						</div>
						<div class="descr-text">
							{moment(record.update_time)?.format('YYYY-MM-DD HH:mm:ss')}
						</div>
					</div>
				) : (
					'--'
				)}
			</div>
		),
	},
	{
		title: $t('pages.process.column.status', '流程状态'),
		dataIndex: 'status',
		width: 120,
		customRender: ({ text }: { text: string }) => (
			<div>
				{text === 'COMPLETE' ? (
					<span class="icon-box">
						<i class="low-code icona-Frame7106 icon-status"></i>
					</span>
				) : (
					''
				)}
				{text === 'TERMINATION' ? (
					<span class="icon-box">
						<i class="low-code icona-Frame7106  termination icon-status"></i>
					</span>
				) : (
					''
				)}
				{text === 'RUNNING' ? (
					<span class="icon-box">
						<i class="low-code icona-Frame7106  running  icon-status"></i>
					</span>
				) : (
					''
				)}
				<span>{applyStatus[text as keyof typeof applyStatus]}</span>
			</div>
		),
	},
	{
		title: $t('pages.process.column.applied', '申请时间'),
		dataIndex: 'start_time',
		width: 120,
		sorter: true,
		// sortDirections: ['ascend', 'descend'],
		// defaultSortOrder: 'descend',
		customRender: ({ text }: { text: number }) => (
			<div>
				<div class="primary-text">
					{text && moment(text)?.format('YYYY-MM-DD')}
				</div>
				<div class="descr-text">{text && moment(text)?.format('HH:mm:ss')}</div>
			</div>
		),
	},
])

export const finishedApplicationColumn = Object.freeze([
	{
		title: $t('informationPortal.SerialNumber', '序号'),
		dataIndex: 'index',
		align: 'center',
		width: 64,
		slots: {
			customRender: 'custom-index',
		},
	},
	{
		title: $t('pages.process.column.name', '流程名称'),
		dataIndex: 'subject',
		width: 236,
		customRender: ({ text, record }: { text: string; record: any }) => (
			<div>
				<div class="primary-text">{text}</div>
				<div class="descr-text">
					<EllipsisTooltip title={record.process_type} />
				</div>
			</div>
		),
	},
	{
		title: $t('pages.process.column.status', '流程状态'),
		dataIndex: 'status',
		width: 156,
		customRender: ({ text }: { text: string }) => (
			<div>
				{text === 'COMPLETE' ? (
					<span class="icon-box">
						<i class="low-code icona-Frame7106 icon-status"></i>
					</span>
				) : (
					''
				)}
				{text === 'TERMINATION' ? (
					<span class="icon-box">
						<i class="low-code icona-Frame7106  termination icon-status"></i>
					</span>
				) : (
					''
				)}
				<span>{applyStatus[text as keyof typeof applyStatus]}</span>
			</div>
		),
	},
	{
		title: $t('pages.process.column.applied', '申请时间'),
		dataIndex: 'start_time',
		width: 220,
		sorter: true,
		// sortDirections: ['ascend', 'descend'],
		// defaultSortOrder: 'descend',
		customRender: ({ text }: { text: number }) => (
			<div>
				<div class="primary-text">
					{text && moment(text)?.format('YYYY-MM-DD')}
				</div>
				<div class="descr-text">{text && moment(text)?.format('HH:mm:ss')}</div>
			</div>
		),
	},
])

// 我的已办
export const myDoneColumn = Object.freeze([
	{
		title: $t('informationPortal.SerialNumber', '序号'),
		dataIndex: 'index',
		align: 'center',
		width: 64,
		slots: {
			customRender: 'custom-index',
		},
	},
	{
		dataIndex: 'subject',
		width: 236,
		customRender: ({ text, record }: { text: string; record: any }) => (
			<div>
				<div class="process-name">
					{text ? text : '--'}
					{record.agent && record.agent ? (
						<span class="process-agent">
							{$t('pages.process.column.processAgent', '代理')}
						</span>
					) : null}
					{record.dh_assignee && record.dh_assignee ? (
						<span class="process-transfer">
							{$t('pages.process.column.processTransfer', '转交')}
						</span>
					) : null}
				</div>
				<div class="descr-text">
					<EllipsisTooltip
						title={record.process_type ? record.process_type : '--'}
					/>
				</div>
			</div>
		),
		slots: {
			title: 'custom-subject',
		},
	},
	{
		title: $t('pages.process.column.approvalResults', '审批结果'),
		dataIndex: 'command_name',
		width: 100,
		customRender: ({ text }: { text: string }) => <div>{text}</div>,
	},
	{
		title: $t('pages.process.column.submitter', '申请人'),
		dataIndex: 'initiator',
		width: 120,
		slots: {
			customRender: 'custom-person',
		},
	},
	{
		title: $t('pages.process.column.applied', '申请时间'),
		dataIndex: 'submit_date',
		width: 120,
		sorter: true,
		customRender: ({ record }: { record: any }) => (
			<div class="descr-text">
				{record.submit_date ? (
					<div>
						<div class="primary-text">
							{moment(record.submit_date)?.format('YYYY-MM-DD')}
						</div>
						<div class="descr-text">
							{moment(record.submit_date)?.format('HH:mm:ss')}
						</div>
					</div>
				) : (
					''
				)}
			</div>
		),
	},
	{
		title: $t('pages.process.column.currentNode', '当前节点'),
		dataIndex: 'current_task',
		width: 140,
		// sorter: true,
		// sortDirections: ['ascend', 'descend'],
		// defaultSortOrder: 'descend',
		customRender: ({ text, record }: { text: string; record: any }) => (
			<div>
				{text && record.create_time ? (
					<div>
						<div class="primary-text primary-dropwrapper">
							<EllipsisTooltip title={record.current_task[0].node_name} />
							<ApprovedPerson recordData={record}></ApprovedPerson>
						</div>
						<div class="descr-text">
							{moment(record.current_task[0].create_time)?.format(
								'YYYY-MM-DD HH:mm:ss'
							)}
						</div>
					</div>
				) : (
					'--'
				)}
			</div>
		),
	},
	{
		title: $t('pages.process.column.approvalStep', '审批节点'),
		dataIndex: 'end_time',
		width: 140,
		sorter: true,
		// sortDirections: ['ascend', 'descend'],
		// defaultSortOrder: 'descend',
		customRender: ({ text, record }: { text: number; record: any }) => (
			<div>
				<div class="primary-text">
					<EllipsisTooltip title={record.node_name} />
				</div>
				<div class="descr-text">
					{text && moment(text)?.format('YYYY-MM-DD HH:mm:ss')}
				</div>
			</div>
		),
	},
])

// 我的知会
export const myNotifyColumn = Object.freeze([
	{
		title: $t('informationPortal.SerialNumber', '序号'),
		dataIndex: 'index',
		align: 'center',
		width: 64,
		slots: {
			customRender: 'custom-index',
		},
	},
	{
		title: $t('pages.process.column.name', '流程名称'),
		dataIndex: 'subject',
		width: 316,
		customRender: ({ text, record }: { text: string; record: any }) => (
			<div>
				<div class="process-name">
					{text ? text : '--'}
					{record.agent && record.agent && text ? (
						<span class="process-agent">
							{$t('pages.process.column.processAgent', '代理')}
						</span>
					) : null}
				</div>
				<div class="descr-text">
					<EllipsisTooltip
						title={record.process_type ? record.process_type : '--'}
					/>
				</div>
			</div>
		),
	},
	{
		title: $t('pages.process.column.submitter', '申请人'),
		dataIndex: 'initiator',
		width: 180,
		slots: {
			customRender: 'custom-person',
		},
	},
	{
		title: $t('pages.process.column.currentNode', '当前节点'),
		dataIndex: 'node_name',
		width: 200,
		sorter: true,
		// sortDirections: ['ascend', 'descend'],
		// defaultSortOrder: 'descend',
		customRender: ({ text, record }: { text: string; record: any }) => (
			<div>
				{text && record.create_time ? (
					<div>
						<div class="primary-text primary-dropwrapper">
							<EllipsisTooltip title={text} />
							<ApprovedPerson recordData={record}></ApprovedPerson>
						</div>
						<div class="descr-text">
							{moment(record.create_time)?.format('YYYY-MM-DD HH:mm:ss')}
						</div>
					</div>
				) : (
					'--'
				)}
			</div>
		),
	},
	{
		title: $t('pages.process.column.applied', '申请时间'),
		width: 160,
		dataIndex: 'submit_date',
		sorter: true,
		customRender: ({ record }: { record: any }) => (
			<div class="descr-text">
				{record.submit_date ? (
					<div>
						<div class="primary-text">
							{moment(record.submit_date)?.format('YYYY-MM-DD')}
						</div>
						<div class="descr-text">
							{moment(record.submit_date)?.format('HH:mm:ss')}
						</div>
					</div>
				) : (
					''
				)}
			</div>
		),
	},
])

// 预计待办
export const expectedTodoColumn = Object.freeze([
	{
		title: $t('informationPortal.SerialNumber', '序号'),
		width: 64,
		dataIndex: 'index',
		align: 'center',
		slots: {
			customRender: 'custom-index',
		},
	},
	{
		title: $t('pages.process.column.name', '流程名称'),
		dataIndex: 'subject',
		width: 296,
		customRender: ({ text, record }: { text: string; record: any }) => (
			<div>
				<div class="primary-text">{text}</div>
				<div class="descr-text">
					<EllipsisTooltip title={record.process_type} />
				</div>
			</div>
		),
	},
	{
		title: $t('pages.process.column.submitter', '申请人'),
		dataIndex: 'initiator',
		width: 180,
		slots: {
			customRender: 'custom-person',
		},
	},
	// {
	// 	title: $t('pages.process.column.applied', '申请时间'),
	// 	dataIndex: 'department',
	// 	width: 160,
	// 	// sorter: true,
	// 	// sortDirections: ['ascend', 'descend'],
	// 	// defaultSortOrder: 'descend',
	// 	customRender: ({ record }: { record: any }) => (
	// 		<div class="descr-text">
	// 			{record.submit_date ? (
	// 				<div>
	// 					<div class="primary-text">
	// 						{moment(record.submit_date)?.format('YYYY-MM-DD')}
	// 					</div>
	// 					<div class="descr-text">
	// 						{moment(record.submit_date)?.format('HH:mm:ss')}
	// 					</div>
	// 				</div>
	// 			) : (
	// 				'--'
	// 			)}
	// 		</div>
	// 	),
	// },
	{
		title: $t('pages.process.column.currentNode', '当前节点'),
		dataIndex: 'node_name',
		width: 200,
		customRender: ({ record }: { record: any }) => (
			<EllipsisTooltip
				title={`${[
					...new Set(
						record?.['current_node_message']?.map(
							(item: Recordable<any>) => item.node_name
						)
					),
				].join('/')}`}
			>
				{/* <div>
					{record?.['current_node_message']
						?.map((item: Recordable<any>) => item.node_name)
						.join('/')}
				</div> */}
			</EllipsisTooltip>
		),
	},
	{
		title: $t('pages.process.column.currentManager', '当前负责人'),
		dataIndex: 'currentManager',
		width: 180,
		slots: {
			customRender: 'custom-person-group',
		},
	},
])

// 草稿箱
let myDraftColumnData: any = Object.freeze([
	{
		dataIndex: 'index',
		width: 64,
		align: 'center',
		slots: {
			title: 'custom-title',
			customRender: 'custom-index',
		},
	},
	{
		title: $t('pages.process.column.title', '标题'),
		dataIndex: 'process_name',
		customRender: ({ text }: { text: string }) => (
			<div>
				<div class="primary-text">{text}</div>
			</div>
		),
	},
	{
		title: $t('pages.process.column.saveTime', '保存时间'),
		dataIndex: 'update_time',
		width: 240,
		sorter: true,
		// sortDirections: ['ascend', 'descend'],
		// defaultSortOrder: 'descend',
	},
	{
		title: $t('common.operate', '操作'),
		dataIndex: 'operate',
		width: 240,
		slots: {
			customRender: 'custom-operate',
		},
	},
])
if (version === '2') {
	myDraftColumnData = Object.freeze([
		{
			dataIndex: 'index',
			width: 64,
			align: 'center',
			slots: {
				title: 'custom-title',
				customRender: 'custom-index',
			},
		},
		{
			title: $t('informationPortal.SerialNumber', '序号'),
			dataIndex: 'SerialNumber',
			width: 64,
			align: 'center',
			slots: {
				customRender: 'custom-serial-number',
			},
		},
		{
			title: $t('pages.process.column.title', '标题'),
			dataIndex: 'process_name',
			customRender: ({ text }: { text: string }) => (
				<div>
					<div class="primary-text">{text}</div>
				</div>
			),
		},
		// {
		// 	title: $t('pages.process.column.creater', '创建人'),
		// 	dataIndex: 'initiator',
		// 	width: 250,
		// 	slots: {
		// 		customRender: 'custom-person',
		// 	},
		// },
		{
			title: $t('pages.process.column.saveTime', '保存时间'),
			dataIndex: 'update_time',
			width: 240,
			sorter: true,
			// sortDirections: ['ascend', 'descend'],
			// defaultSortOrder: 'descend',
		},
		{
			title: $t('common.operate', '操作'),
			dataIndex: 'operate',
			width: 240,
			slots: {
				customRender: 'custom-operate',
			},
		},
	])
}
export const myDraftColumn = myDraftColumnData
export default {
	myTodoColumn,
	myDoneColumn,
	myDraftColumn,
	myNotifyColumn,
	agentTodoColumn,
	expectedTodoColumn,
	approvalApplicationColumn,
	finishedApplicationColumn,
}
